import React, {useRef} from 'react';

import './index.css'
import {useNavigate} from "react-router-dom";

const userList = ['zhangsan','lisi','wangwu']
function Index(props) {
    const navigate = useNavigate()
    const userRef = useRef()
    const login = function (e){
        if(e.keyCode===13){
            const value = userRef.current.value.trim()
            if(!value)return alert('请输入用户名！')
            if(userList.includes(value)){
                localStorage.setItem('userName',value)
                navigate('/my')
            }else{
                alert('用户不存在！')
            }
        }
    }
    return (
        <div id={'login'}>
            <div className={'form'}>
                <h3>用户登录</h3>
                <input onKeyUp={login} ref={userRef} type="text" placeholder={'请输入用户名并按回车'}/>
            </div>
        </div>
    );
}

export default Index;